<style>
    .btn-file {  /*  上传按钮*/
    position: relative;
    overflow: hidden;
    margin-top: 50px;
}

.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity = 0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}
</style>
<div id="content">
   <!-- <div class="row">
        <big-breadcrumbs items="['权限管理', '添加用户']" icon="home" class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></big-breadcrumbs>
        &lt;!&ndash; <div smart-include="app/layout/partials/sub-header.tpl.html"></div> &ndash;&gt;
    </div>-->
    <!-- widget grid -->
    <section id="widget-grid" widget-grid>
        <!-- start row -->

        <div class="row">
            <!-- well -->
            <div style="margin: 0px 20px">
                    <header role="header" class="ui-sortable-handle" style="height: 30px;background:#4c4f53;">
                       <span style="line-height: 30px;color: white;margin-left: 20px;">填写用户信息</span>
                       <span style="line-height: 30px;color: white;margin-right: 20px;" class="pull-right">带*为必填项</span>
                    </header>                      
                <div class="well">
                    <div class="row">

                    <form id="infoForm" class="form-horizontal" role="form" name="infoForm" novalidate 
                    enctype="multipart/form-data">
                      <div class="form-group">
                        <label class="col-sm-2 control-label"><span style="color: red">*</span>用户名</label>
                        <div class="col-sm-3">
                          <input type="text" class="form-control" name="name" placeholder="请输入用户名" ng-model="infor.name" required>
                        </div>
                        <label class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-3">
                          <input type="text" class="form-control" name="user_name" placeholder="请输入姓名" ng-model="infor.user_name" required>
                        </div>
                      </div>
                      <div class="form-group">
                        <label class="col-sm-2 control-label"><span style="color: red">*</span>邮件</label>
                        <div class="col-sm-3">
                          <input type="email" class="form-control" name="email" ng-model="infor.email" ng-blur="loseFocus()">
                        </div>
                        <label class="col-sm-2 control-label">电话号码</label>
                        <div class="col-sm-3">
                          <input type="text" class="form-control" name="phone" ng-model="infor.phone" ng-parten="/^1[3|5][0-9]\d{4,8}$/">
                        </div>
                      </div>
                      <div class="form-group">
                        <label for="inputPassword" class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-3">
                          <input type="password" name="password" class="form-control" ng-model="infor.password">
                        </div>
                      </div>
                        <div class="form-group">
                         <label class="col-sm-2 control-label">角色</label>
                         <div class="col-sm-3">
                            <select class="form-control" name="role_id" ng-model="infor.role_id">
                              <option value="" >选择用户角色</option>
                              <option value="{{role.Id}}" ng-repeat="role in roles">{{role.Name}}</option>
                            </select>
                         </div>
                      </div>
                      <div class="form-group">
                         <label class="col-sm-2 control-label">部门</label>
                         <div class="col-sm-3">
                            <select class="form-control" name="dept_id" ng-model="infor.dept_id">
                              <option value="" >选择所属部门</option>
                              <option value="{{depart.Id}}" ng-repeat="depart in departs">{{depart.Name}}</option>
                            </select>
                         </div>
                      </div>
                      <div class="form-group">
                         <label class="col-sm-2 control-label">图像</label>
                         <img src="styles/img/userFirst.jpg" class="col-sm-2" style="width: 100px;height: 80px;" id="picture_url">

                         <span class="btn btn-primary btn-xs btn-file"> 浏览..
                          <input type="file" name="userfile" value=""  id="myFile"  ng-model="infor.picture_url"/>
                         </span>
                      </div>
                      <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                        	<a data-ui-sref="app.user.allUser" >
                      <button id="submit" type="submit" ng-click="addBtn()" class="btn btn-default btn-primary">完成修改</button>
                        	</a>
                          
                        </div>
                      </div>

                    </form>


                    </div>
                </div>
            </div>
            <!-- end well-->
        </div>
        <!-- end row -->

    </section>


</div>
<script type="text/javascript">
// 用户图像的上传onchange
   var img_url = '';
   $("#myFile").on("change",function(){
      var fileM = document.getElementById("myFile");
      var fileObj = fileM.files[0];
      console.log(fileObj);
      //创建formData对象，formdata用来存储表单的数据
      var formData = new FormData();
      formData.append("file",fileObj);
      var ajax = new XMLHttpRequest();
      console.log(formData);
      ajax.open("POST", appConfig.base[1].baseURI + "user/addpicture");
      ajax.send(formData);
      ajax.onreadystatechange = function(){
        if (ajax.readyState == 4) {
          //304也算成功，有一个缓存的临时的数据
          if (ajax.status >= 200 && ajax.status < 300||ajax.status == 304) {
            var obj = JSON.parse(ajax.responseText);
            console.log(obj);
            console.log(obj.src);
             $("#picture_url").attr("src",obj.src);
            img_url = obj.src;
          }
        }
      }
   });
  //提交事件:完成form表单数据的提交
    $("#submit").on("click",function(){
      var infor = $("#infoForm").serializeArray();
      var stu = {};
      for (var i = 0; i < infor.length; i++) {
        var obj = infor[i];
        stu[obj.name] = obj.value;
      }
      stu["picture_url"] = img_url;
      stu["password"] =  hex_sha1(stu["password"]);
      // console.log(stu);
      $.ajax({
        type:"post",
        async:true,
        beforeSend: function(xhr) {
                 // xhr.setRequestHeader("token",$.cookie('token'));
          },
        url: appConfig.base[1].baseURI + "user/addadmin",
        data:JSON.stringify(stu),
        success:function(res){

        }
      });
    });


</script>